<style>
    .bottom {
        background: #1c1c1c;
        color: white;
        vertical-align: bottom;
        height: 310px;
        position: relative;
        min-width: 1200px;
    }

    .bottom-top, .bottom-bottom {
        width: 1200px;
        margin: 0 auto;
    }

    .bottom-center-talk {
        clear: both;
    }

    .bottom-center-talk > p {
        font-size: 14px;
        margin-top: 20px;
    }

    .bottom-center-talk > p > span {
        color: white;
        margin-right: 10px;
    }

    .bottom-right {
        margin-top: 40px;
        width: 300px;
        height: 150px;
        margin-right: 30px;
    }

    .qq, .wx {
        background: #ffffff;
        float: left;
        margin-right: 10px;
        height: 150px;
    }

    .wx > img, .qq > img {
        width: 100px;
        vertical-align: middle;
        margin: 10px 10px;
    }

    .wx > p, .qq > p {
        color: #333333;
        font-size: 12px;
        text-align: center;
    }

    .wx > p > span, .qq > p > span {
        margin-top: -20px;
    }

    .line {
        width: 58px;
        clear: both;
        height: 2px;
        background: white;
        float: left;
        margin-top: -22px;
        margin-left: 0px;
    }

    .bottom-center-opinion input {
        width: 250px;
        height: 30px;
        padding: 0 10px;
        outline: none;
        color: #555555;
    }

    .bottom-center-opinion textarea {
        width: 300px;
        outline: none !important;
        border-radius: 0px;
        border: none;
    }

    .bottom-center {
        margin-left: 25px;
        width: 500px;
    }

    .bottom-center-statement {
        padding-top: 50px;
        width: 200px;
    }

    .bottom-center-statement > ul > li > a {
        color: #ffffff;
    }

    .bottom-center-statement ul li {
        padding-left: 100px;
        margin-top: 10px;
    }

    .bottom-center-titles ul li {
        float: left;
        height: 30px;
        margin: 20px 0;
        margin-right: 25px;
    }

    .bottom-center-titles > ul > li {
        color: white;
        cursor: pointer;
    }

    .bottom-bottom {
        width: 1200px;
        margin: 0 auto;
        top: 10px;
        position: relative;
        border-top: 1px solid white;
        clear: both;
    }

    .bottom-bottom > p {
        padding-top: 10px;
        clear: both;
        font-size: 12px;
        text-align: center;
        color: white;
    }

    .bottom-bottom > p:last-child {
        margin-top: -10px;
    }

    .bottom-bottom > p > a, .bottom-bottom > p {
        color: #ffffff;
        font-size: 14px;
    }
    .left{
        float: left;
    }
    .right{
        float: right;
    }
    .bottom-bottom > p {
        line-height: 30px;
    }


    .right-fixed a {
        display: block;
        height: 48px;
        background: url("__static__/images/btn.png") no-repeat;
        margin-top: 1px;
    }
    .right-fixed > a.goTop {
        background-position: 0 -196px;
    }
    .right-fixed > a.goTop:hover {
        background-position: -52px -196px;
    }
</style>
<div class="bottom">
    <div class="bottom-top">
        <div class="bottom-center left">
            <div class="bottom-center-titles">
                <ul>
                    <li id="talk">联系我们</li>
                     <div class="line"></div>
                </ul>
            </div>
            <div class="bottom-center-talk">
                <p><span class="glyphicon glyphicon-envelope"></span> jsjxh@wyjsjxh.com</p>

                <p><span class="glyphicon glyphicon-phone-alt"></span>18163764752</p>

                <p><span class="glyphicon glyphicon-map-marker"></span>湖南省长沙市天心区青园路168号(湖南网络工程职业学院实训楼306)</p>
            </div>
        </div>
        <div class="bottom-center-statement left">
            <ul>
                <li><a href="#">版权声明</a></li>
                <li><a href="#">隐私声明</a></li>
            </ul>
        </div>
        <div class="bottom-right right">
            <div class="qq">
                <img src="__static__/images/qq.png" alt="湖南网络工程职业学院计算机协会技术交流群">

                <p><span>计协技术交流群</span></p>
            </div>
            <div class="wx">
                <img src="__static__/images/wx.jpg" alt="湖南网络工程职业学院计算机协会微信公众号">

                <p><span>计协微信公众号</span></p>
            </div>
        </div>
    </div>
    <div class="bottom-bottom">
        <p>版权所有: 湖南网络工程职业学院计算机协会&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;技术支持(授权)：
            <a href="/songjie">湖南网络工程职业学院计算机协会理事会主席—宋杰</a></p>

        <p>CopyRight ©2018 wyjsjxh.com All Rights Reserved <a href="http://www.miitbeian.gov.cn/">湘ICP备15003037号</a></p>
    </div>


    <div class="right-fixed">
        <a href="#" class="goTop" style="display: block;"></a>
    </div>
</div>
<script>

</script>